<template>
	<custom-nav :showBackArrow="true" :title="'编辑资料'"></custom-nav>
	<view class="page-user" :style="pagePaddingTop">
		<view class="wrap-basic">
			<view class="wrap-basic-item" @tap="handleCancellation">
				<view class="">头像</view>
				<view class="item-input">
					<view class="item-avatar">
						<image @tap="toUser" :class="['wrap-avatar',showAvatar==-1?'':'user-avatar']"
							:src="showAvatar==-1?'/static/default_avatar.png':showAvatar" />

						<button class="btn-avatar" @tap="onChooseImage"></button>
					</view>
					<image class="icon-arrow" src="/static/icon_arrow_green.png"></image>
				</view>

			</view>
			<view class="wrap-basic-item">
				<view>昵称</view>
				<view class="item-input"><input class="txt-input" placeholder="请输入昵称"
						placeholder-style="color:rgba(255, 255, 255, 0.5)" v-model="showNickName" /></view>
			</view>
			<view class="wrap-basic-item">
				<view>手机号</view>
				<view class="item-input phone"><input class="txt-input" placeholder="请输入手机号"
						placeholder-style="color:rgba(255, 255, 255, 0.5)" type="tel" maxlength="11"
						v-model="showUserPhone" /></view>
			</view>
		</view>
		<view :class="['btn-login',!showNickName||!showUserPhone? 'disabled':'']" @tap="handleSave">保存</view>

	</view>

</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		RegMobile
	} from "@/utils/constant.js"
	import {
		useUser
	} from "@/hooks/useUser.js"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"

	import CustomNav from "@/components/custom-nav/index.vue"
	import {
		userInfoAPI
	} from "@/http/apis/customerBaseAPI.js"
	import {
		uploadAPI
	} from "@/http/uploadFile"
	import {
		showToast
	} from "@/utils/frameApi"


	const userStore = useUser();
	let userInfo = ref({
		nick_name: "-1",
		weichat_img: '-1',
		amount: '',
		user_phone: ''
	})
	let showNickName = ref("")
	let showAvatar = ref("")
	let showUserPhone = ref("")
	const _getUserInfo = () => {
		userStore.getUserInfo().then(res => {
			// console.log(res,">>>cacheUserInfo")
			Object.assign(userInfo.value, res?.public_user_info || {})

			if (userInfo.value && userInfo.value.weichat_img && userInfo.value.weichat_img != -1) {
				showAvatar.value = userInfo.value.weichat_img;
			} else {
				showAvatar.value = "-1";
			}
			if (userInfo.value && userInfo.value.nick_name && userInfo.value.nick_name != -1) {
				showNickName.value = userInfo.value.nick_name;
			} else {
				showNickName.value = "";
			}
			if (userInfo.value && userInfo.value.user_phone && userInfo.value.user_phone != -1) {
				let tmpPhone = userInfo.value.user_phone;
				// tmpPhone = tmpPhone.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
				showUserPhone.value = tmpPhone
			} else {
				showUserPhone.value = "";
			}
		}, err => {

		})
	}
	_getUserInfo()



	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": (navHeightInfo.navTotalHeight + uni.upx2px(24)) + 'px'
	})
	const confirmLogout = (res) => {
		uni.clearStorageSync()
		if (res) {
			uni.reLaunch({
				url: '/pages/login/index'
			})
		}
	}
	let requesting = false
	const handleSave = async () => {
		if (!showNickName.value) {
			showToast({
				title: '请输入昵称'
			})
			return;
		}
		if (showNickName.value == -1) {
			showToast({
				title: '请输入正确的昵称'
			})
			return;
		}
		if (!RegMobile.test(showUserPhone.value)) {
			showToast({
				title: "请输入正确的手机号"
			})
			return;
		}
		if (requesting) {
			return;
		}
		requesting = true;
		let postData = {
			invoke_method: "change_user_info",
			nick_name: showNickName.value,
			user_phone: showUserPhone.value,
			weichat_img: showAvatar.value,
			pre_db_para_id_public_user_info: userInfo.value.id_public_user_info
		};
		let success = true;
		let result = await userInfoAPI(postData).catch((err) => {
			console.log(err, ">>>err")
			requesting = false;
			success = false;
		})
		if (success) {
			requesting = false;
			let cacheUserInfo = await userStore.getUserInfo();
			cacheUserInfo.public_user_info.nick_name = showNickName.value;
			cacheUserInfo.public_user_info.weichat_img = showAvatar.value;
			cacheUserInfo.user_phone = showUserPhone.value;
			userStore.setUserInfo(cacheUserInfo);
			_getUserInfo()
			showToast({
				title: '保存成功'
			});
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)

		}
	}
	// 上传头像
	const onChooseAvatar = () => {

	}
	const onChooseImage = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册选择
			success: async (res) => {

				console.log(JSON.stringify(res.tempFilePaths));
				let resUpload = await uploadAPI(res.tempFilePaths[0]).catch((err) => {
					console.log(err, ">>>上传头像失败")
				})
				if (resUpload) {
					showAvatar.value = resUpload
				}
				console.log(resUpload, ">>>>")

			}
		})
	}
</script>

<style lang="less" scoped>
	.page-user {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #182836;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30rpx;
		box-sizing: border-box;

		.wrap-basic {
			position: relative;
			width: 686rpx;
			padding: 18rpx 32rpx 0;
			background: #2D4052;
			border-radius: 28rpx;
			margin: 0 auto;
			box-sizing: border-box;

			.wrap-basic-item {
				position: relative;
				width: 100%;
				height: 120rpx;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(243, 243, 243, 0.1);

				&:last-child {
					margin-bottom: 0;
					border-bottom: 0;
				}

				.item-input {
					position: relative;
					flex: 1;
					height: 100%;
					display: flex;
					display: -webkit-flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 78rpx;

					&.phone {
						margin-left: 48rpx;
					}

					.item-avatar {
						position: relative;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.btn-avatar {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						opacity: 0;
					}

					.wrap-avatar {
						position: relative;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						box-sizing: border-box;
						flex-shrink: 0;
						margin-right: 0rpx;

						&.user-avatar {
							border: 5rpx solid #FFF;
						}
					}

					.txt-input {
						position: relative;
						flex: 1;
						height: 100%;
						line-height: 120rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

				}
			}
		}

		.icon-arrow {
			position: relative;
			width: 30rpx;
			height: 30rpx;
			vertical-align: top;
		}

		.btn-login {
			position: relative;
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			// background: linear-gradient(0deg, #10A383 0%, #48C282 100%);
			background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);

			border-radius: 48rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			// color: #FFFFFF;
			color: #182836;
			opacity: 1;
			margin: 72rpx auto 0;
			text-align: center;

			&.disabled {
				opacity: 0.5;
			}
		}

		.wrap-logout {
			position: relative;
			width: 686rpx;
			padding: 40rpx 32rpx;
			background: #2D4052;
			border-radius: 28rpx;
			margin: 32rpx auto 0;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>